<template>
  <div>
    <!--    搜索栏-->
    <el-row class="table-grid-content">
      <el-col :span="24" class="grid">
        <el-input v-model="input" placeholder="请输入搜索关键字"></el-input>
      </el-col>
    </el-row>
    <!--    头部命名-->
    <el-table
      :data="table"
      border
      style="width: 100%"
      max-height="540px">
      <el-table-column
        align="center"
        prop="uploadingTime"
        label="上传时间">
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="姓名">
      </el-table-column>
<!--      <el-table-column-->
<!--        align="center"-->
<!--        prop="userId"-->
<!--        label="学号">-->
<!--      </el-table-column>-->
      <el-table-column
        align="center"
        prop="projectName"
        label="加分原因">
      </el-table-column>
      <el-table-column
        align="center"
        prop="projectType"
        label="类型">
      </el-table-column>
      <el-table-column
        align="center"
        prop="state"
        label="状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.state === '1'" style="border-radius: 20px">
            <span style="font-size: 20px; font-family: 楷体">通过</span>
          </el-tag>
          <el-tag type="warning" v-if="scope.row.state === '-1'" style="border-radius: 20px">
            <span style="font-size: 20px; font-family: 楷体">未审核</span>
          </el-tag>
          <el-tag type="danger" v-if="scope.row.state === '0'" style="border-radius: 20px">
            <span style="font-size: 20px; font-family: 楷体">驳回</span>
          </el-tag>
        </template>
      </el-table-column>
        <el-table-column
        align="center"
        prop="stateCause"
        label="原因">
<!--          <template slot-scope="scope">-->
<!--            <span  v-if="scope.row.state === '0'"></span>-->
<!--          </template>-->
      </el-table-column>

      <el-table-column
        align="center"
        prop="particulars"
        label="详情"
        width="250px">


        <template slot-scope="scope">
          <el-button v-if="scope.row.state === '-1'" type="warning" @click="quxiao">取消上传</el-button>
          <el-button type="primary" @click="xiangqing(scope.row)">上传详情</el-button>
        </template>

        <el-dialog
          title="详情"
          :visible.sync="dialogVisible"
          width="30%"
          :append-to-body="true">

          <el-form :model="user" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="user.name" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="加分原因">
              <el-input v-model="user.projectName" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="加分类型">
              <el-input v-model="user.projectType" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="证明材料">
              <el-image :src="user.materials"></el-image>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-table-column>
    </el-table>
  </div>
</template>


<script>
import axios from "axios";

export default {
  name: "ElseUploadingPublicity",

  mounted() {
    // 页面加载完成异步请求查询所有数据
    this.selectAll();
    console.log(this.tables)
  },

  methods: {

    quxiao(){

    },

    xiangqing(row){
      this.dialogVisible = true
      this.user = row
      console.log(this.user)
    },

    //查询所有数据
    selectAll() {
      axios.get('/api/uploading/queryOtherExtraPointsApplyRecord').then((res) => {
        console.log(res)
        this.tables = res.data.data
      })
    },

    goBack() {
      console.log('go back');
    }
  },

  computed: {
    table() {
      const input = this.input
      if (input) {
        return this.tables.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key]).toLowerCase().indexOf(input) > -1
          })
        })
      }
      return this.tables
    }
  },
  data() {
    return {
      dialogVisible: false,

      user: [],

      msg: 'Welcome to Your Vue.js App',
      centerDialogVisible: false,
      isAddMembers: false,
      searchData: '',
      input: '',
      id:'',

      tables: [],
    }
  }
}
</script>

<style scoped>
.table-grid-content {
  border-radius: 8px;
  height: 50px;
  background: #ebeef5;
  padding: 5px;
  margin: 0;
}
</style>
